<template>
  <div class="riskWarning"
    ref="riskWarningRef">
    <!-- <div class="ul"> -->
    <div v-for="(item, index) in arrList"
      :key="index"
      class="li">
      <div class="li-item">
        <p v-if="item.risk_level == '中'"
          class="li-img2"></p>
        <p v-if="item.risk_level == '低'"
          class="li-img3"></p>
        <p v-else
          class="li-img1"></p>
        <p class="message">{{ item }}</p>
      </div>
    </div>
    <!-- </div> -->
  </div>
</template>

<script>
import { getWaringStatistics } from '@/api/chart.js'
export default {
  props: {
    year: {
      require: true,
      type: String,
      default: ''
    }
  },
  watch: {
    year: {
      handler() {
        this.initMessage()
      }
    },
    deep: true
  },
  data() {
    return {
      arrList: []
    }
  },
  mounted() {
    this.initMessage()
  },
  methods: {
    initMessage() {
      getWaringStatistics({ year: this.year }).then(res => {
        this.arrList = res.data ?? []
        this.initScroll()
      })
    },
    // 数据滚动
    initScroll() {
      // 拿到table挂在后的真实DOM
      const table = this.$refs.riskWarningRef
      // 拿到挂在数据的div
      const divData = table
      // 鼠标移入停止滚动
      divData.onmouseover = () => {
        clearInterval(this.t)
      }
      // 初次调用
      this.start(divData)
      // 鼠标移出开始滚动
      divData.onmouseout = () => {
        this.start(divData)
      }
    },
    start(divData) {
      if (divData.clientHeight > divData.scrollHeight) {
        return
      }
      this.t = setInterval(() => {
        divData.scrollTop += 1
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0
        }
      }, 100)
    }
  }
}
</script>

<style lang="less" scoped>
.riskWarning {
  position: relative;
  height: 94%;
  // padding: 20px;
  overflow: hidden;
  .li {
    width: 100%;
    margin-bottom: 15px;
    &:last-child {
      margin-bottom: 0;
    }
    .li-item {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 10px 15px;
      .li-img1 {
        width: 24px;
        height: 24px;
        background: url('~@/assets/img/特大风险@2x.png') no-repeat;
        background-size: 100% 100%;
      }
      .li-img2 {
        width: 24px;
        height: 24px;
        background: url('~@/assets/img/中等风险@2x.png') no-repeat;
        background-size: 100% 100%;
      }
      .li-img3 {
        width: 24px;
        height: 24px;
        background: url('~@/assets/img/一般风险@2x.png') no-repeat;
        background-size: 100% 100%;
      }
      .message {
        width: 84%;
        white-space: nowrap;
        position: relative;
        text-overflow: ellipsis;
        overflow: hidden;
        padding-left: 16px;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #cce0f7;
      }
    }
  }
  .li:nth-child(odd) {
    background: url('~@/assets/img/风险提示奇数.png') no-repeat;
    background-size: 100% 100%;
  }
  .li:nth-child(even) {
    background: url('~@/assets/img/风险提示偶数.png') no-repeat;
    background-size: 100% 100%;
  }
}
</style>